<template>
  <div>
    <a-page-header :ghost="false" title="考试管理/THE EXAMINATION MANAGEMENT" />
    <a-card
      :bordered="false"
      style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
    >
      <a-card :bordered="false">
        <a-row :gutter="16">
          <a-col :span="20">
            <a-form-model layout="inline">
              <a-form-model-item label="考试名称">
                <a-input placeholder="请输入考试名称" v-model="examName" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="findExamName">
                  搜索
                </a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="resetSearch">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-col>
          <a-col :span="4">
            <a-form-model layout="inline">
              <a-form-model-item>
                <a-button
                  type="primary"
                  @click="goToCreateExamination"
                  style="width: 100px;"
                >
                  创建考试
                </a-button>
              </a-form-model-item>
            </a-form-model></a-col
          >
        </a-row>
      </a-card>
      <a-spin :spinning="spinning">
        <a-table
          style="margin-top: 16px;"
          tableLayout="auto"
          :columns="columns"
          :data-source="data"
        >
          <span slot="name" slot-scope="text">{{ text }}</span>
          <span slot="questionTitle">考试名称</span>
          <!-- <span slot="action" slot-scope="text,index"> -->
          <template slot="action" slot-scope="text, record">
            <span slot="action">
              <a @click="showExamModal(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="删除之后不会保留学生的考试信息?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delExam(record)"
              >
                <a style="color: #FF4D4F;">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </a-table>
      </a-spin>
    </a-card>

    <!-- <a-modal
      v-model="examVisible"
      title="考试设置"
      @ok="modifyExamPost"
      okText="保存"
      cancelText="取消"
      :maskClosable="false"
      :destroyOnClose="true"
      :width="1080"
    >
    </a-modal> -->
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "questionTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    title: "考试班级",
    dataIndex: "examClasses",
    key: "examClasses"
  },
  {
    title: "总分",
    key: "examTotalScore",
    dataIndex: "examTotalScore"
  },
  {
    title: "开始时间",
    dataIndex: "examStartT",
    key: "examStartT"
  },
  {
    title: "结束时间",
    dataIndex: "examEndT",
    key: "examEndT"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

const data = [];

export default {
  data() {
    return {
      spinning: false,
      examName: "", // 模糊查询
      data,
      columns,
      examVisible: false
    };
  },
  methods: {
    showExamModal(record) {
      this.$router.push({
        path: "/home/exam/examinationCreated",
        query: {
          record: JSON.stringify(record)
        }
      });
      this.examVisible = true;
    },
    getExaminationList() {
      this.spinning = true;
      this.$axios
        .get("/get/exam", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            var obj;
            for (let i = 0; i < this.data.length; i++) {
              this.data[i].key = this.data[i].id;
              this.data[i].name = this.data[i].examName;
              obj = JSON.parse(this.data[i].examSetting);
              this.data[i].obj = obj;
              this.data[i].examClasses = obj[0].examClasses;
              this.data[i].examStartT = this.formDate(obj[0].examStartTime);
              this.data[i].examEndT = this.formDate(obj[0].examEndTime);
              this.data[i].examTotalScore = obj[0].examTotalScore;
            }
            // console.log(this.data);
          } else {
            this.$message.error("获取失败");
          }
        });
      this.spinning = false;
    },
    goToCreateExamination() {
      this.$router.push({ path: "/home/exam/examinationCreated" });
    },
    formDate(dateForm) {
      if (dateForm === "") {
        //解决deteForm为空传1970-01-01 00:00:00
        return "";
      } else {
        var dateee = new Date(dateForm).toJSON();
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        return date;
      }
    },
    delExam(record) {
      this.$axios
        .delete("/delete/exam/" + record.id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.getExaminationList();
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    findExamName() {
      if (this.examName.match(/^[ ]*$/)) {
        return this.$message.error("不能为空");
      }
      this.spinning = true;
      if (
        this.examName.replace(/(^s*)|(s*$)/g, "").length == 0 ||
        this.examName == " "
      ) {
        this.getExaminationList();
        return;
      }
      console.log(this.examName);
      this.$axios
        .get("/find/exam/names/" + this.examName, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            var obj;
            for (let i = 0; i < this.data.length; i++) {
              this.data[i].key = this.data[i].id;
              this.data[i].name = this.data[i].examName;
              obj = JSON.parse(this.data[i].examSetting);
              this.data[i].obj = obj;
              this.data[i].examClasses = obj[0].examClasses;
              this.data[i].examStartT = this.formDate(obj[0].examStartTime);
              this.data[i].examEndT = this.formDate(obj[0].examEndTime);
              this.data[i].examTotalScore = obj[0].examTotalScore;
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
      this.spinning = false;
    }, // 重置搜索
    resetSearch() {
      this.examName = "";
      this.getExaminationList();
    }
  },
  created() {
    this.getExaminationList();
  }
};
</script>
